<script setup>
import {reactive} from "vue";
import ProgressBar from "@/components/ProgressBar.vue";
import {checkFileMd5, checkFragmentMd5, showFilePicker} from "@/util/fileUtil";
import {confirmBox, message} from "@/util/util";
import {postRequest} from "@/util/api";

const props = defineProps({
  parentDirId: [String, Number],
  initData: Function,
});

const data = reactive({
  visible: false,
  list: [],
});

let pauseItemList = [];

function goon(item) {
  item.pause = false;
  pauseItemList = pauseItemList.filter(md5 => md5 !== item.fileMd5);
  startUpload(item);
}

function remove(item) {
  pauseItemList = pauseItemList.filter(md5 => md5 !== item.fileMd5);
  for (let i = 0; i < data.list.length; i++) {
    if (data.list[i].fileMd5 === item.fileMd5) {
      data.list.splice(i, 1);
      break;
    }
  }
}

function pause(item) {
  item.pause = true;
  pauseItemList.push(item.fileMd5);
}

function removeFile(item) {
  confirmBox(`确认删除${item.name}文件的下载吗？`, () => {
    remove(item);
  });
}

function startUpload(item) {
  checkFragmentMd5(item, 0, props.parentDirId, (file) => {
    message(file.name + "上传成功", "success");
    remove(file);
    props.initData();
  });
}

async function uploadFile() {
  const file = await showFilePicker();
  if (file) {
    await postRequest("/file-info/judgeFileExist", null, {
      dirId: props.parentDirId,
      fileName: file.name
    }, async () => {
      data.list.push(file);
      await checkFileMd5(data.list[data.list.length - 1]);
      startUpload(data.list[data.list.length - 1]);
      data.visible = true;
    });
  }
}

function openUploadDialog() {
  data.visible = true;
}

defineExpose({
  uploadFile,
  openUploadDialog,
});
</script>

<template>
  <el-dialog v-model="data.visible" title="上传详情查看" width="80%">
    <div class="file-list">
      <div v-for="item in data.list" :key="item.fileMd5" class="single-file">
        <ProgressBar :upload-file="item"/>
        <div class="single-file-menu">
          <span>{{ item.percentage }}%</span>
          <i v-if="item.percentage !== 100 && !item.pause" class="iconfont icon-goon" @click="pause(item)"/>
          <i v-if="item.percentage !== 100 && item.pause" class="iconfont icon-pause" @click="goon(item)"/>
          <i v-if="item.percentage === 100" class="iconfont icon-complete"/>
          <i class="iconfont icon-close" style="margin-left: 3px" @click="removeFile(item)"/>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.file-list {
  width: 100%;
  margin: 0 auto 20px;

  .single-file {
    position: relative;
    margin: 10px 0;

    .single-file-menu {
      position: absolute;
      top: 0;
      right: 10px;
      width: 100px;
      height: 30px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        line-height: 32px;
        color: black;
        text-align: center;
        display: block;
        width: 60px;
        height: 30px;
      }

      .icon-pause,
      .icon-goon,
      .icon-complete,
      .icon-close {
        color: black;

        &::before {
          font-size: 20px;
          width: 20px;
          height: 30px;
          line-height: 32px;
          text-align: center;
          display: block;
        }

        &:hover {
          cursor: pointer;
          color: #f56c6c;
        }
      }
    }
  }
}
</style>